<template>
  <!-- 选择银行-组件 -->
  <uni-popup ref="alertDialog" position="bottom">
    <view class="popup-wrapper">
      <!-- 搜索 -->
      <view class="search-wrapper">
        <view class="ico-search">
          <image class="ico-search-img" src="https://jhl-pay.oss-cn-shenzhen.aliyuncs.com/agent/ico-input-search.png" />
        </view>
        <view class="input-wrapper">
          <input class="input" v-model="searchKey" confirm-type="search" :placeholder="placeholderStr"
            placeholder-style="color: #999999" @input="handleInputSearch" />
        </view>
      </view>

      <!-- list -->
      <view class="list-wrapper">
        <!-- 主行 -->
        <view class="list" v-if="bankList.length > 0">
          <view class="list-item" :class="{ 'active': item.name == bankName }" v-for="(item, index) in bankList"
            @click="selectBank(item, index)">
            {{ item.name }}
          </view>
        </view>
        <view class="no-data" v-else>暂无数据</view>
      </view>

      <!-- 按钮 -->
      <view class="divider"></view>
      <view class="btn-cancel" @click="closeEv">取消</view>

    </view>
  </uni-popup>
</template>

<script setup>
import { ref, onMounted, watch, defineExpose } from 'vue';
import { queryBankNameList } from "@/api/common";
import { debounce } from '@/utils/debounceThrottle';
defineExpose({
  openDialog,
  closeDialog
});
/** props-组件属性 */
const props = defineProps({
  // 值
  visible: {
    type: Boolean,
    default: false
  },
  // 选择的银行
  selectedBankName: {
    type: String,
    default: ''
  },
  // 是否立即渲染
  immediateRender: {
    type: Boolean,
    default: true
  }
});
// 创建响应式数据  
const alertDialog = ref();
/** emits-组件事件 */
const emits = defineEmits(['operate', 'close', 'getBankNameData']);

/** 生命周期 */
onMounted(() => {
  // 获取银行主行列表
  if (!!props.selectedBankName && !props.immediateRender) return;
  getBankNameList();
});

/** 监听 */
watch(
  () => props.selectedBankName,
  async (newVal) => {
    if (newVal) {
      if (!props.immediateRender) {
        // 获取银行主行列表
        await getBankNameList();
      }
      // 置顶已选择的银行
      topSelectedBankName();
    }
  },
  {
    immediate: true
  }
);

// 搜索关键字
let searchKey = ref('');
let placeholderStr = ref('搜索开户行');

// 搜索关键字
const handleInputSearch = debounce((ev) => {
  const { value } = ev.detail;
  console.log('搜索=>', value);

  // 搜索主行
  handleSearchBankName(value);
}, 500);

/** 开户主行 */
let bankName = ref('');
let bankList = ref([]);
let defaultBankList = [];

// 获取主行列表
function getBankNameList() {
  return new Promise((resolve, reject) => {
    queryBankNameList().then((res) => {
      console.log('获取主行列表=>', res);

      bankList.value = [];
      defaultBankList = [];
      res.payload.forEach((item) => {
        bankList.value.push({
          name: item.bankName,
          value: item.bankId,
        });
        defaultBankList.push({
          name: item.bankName,
          value: item.bankId,
        });
      });
      console.log("defaultBankList", defaultBankList)
      emits('getBankNameData', defaultBankList);
      resolve('');
    });
  });
}

// 搜索主行
function handleSearchBankName(value) {
  if (value) {
    bankList.value = defaultBankList.filter(
      (item) => item.name.toLowerCase().indexOf(value.toLowerCase()) !== -1
    );
  } else if (props.selectedBankName) {
    // 置顶已选择的银行
    topSelectedBankName();
  } else {
    bankList.value = defaultBankList;
  }
}

// 选择主行
let selectedBankNameIdx = ref(0);

function selectBank(data, index) {
  console.log("data-data", data)
  searchKey.value = '';
  // 保存索引值，用于再次打开弹窗时，标识已选择银行
  selectedBankNameIdx.value = index;

  bankName.value = data.value;

  emits('operate', {
    bankName: bankName.value,
    bankId: data.name
  });
}

// 置顶已选择的银行
function topSelectedBankName() {
  let result = {
    name: props.selectedBankName,
    value: props.selectedBankName,
  };
  bankList.value = defaultBankList.filter(v => v.value !== props.selectedBankName);
  bankList.value.unshift(result);
  bankName.value = props.selectedBankName;
}

// 取消事件
function closeEv() {
  // 清空搜索框
  searchKey.value = '';
  // 重置银行列表
  if (props.selectedBankName) {
    // 置顶已选择的银行
    topSelectedBankName();
  } else {
    bankList.value = defaultBankList;
  }

  emits('close');
}
function openDialog() {
  alertDialog.value.open()
}
function closeDialog() {
  alertDialog.value.close()
}
</script>

<style lang='scss' scoped>
.popup-wrapper {
  height: 80vh;
  display: flex;
  flex-direction: column;
  background-color: #FFF;
}

// 搜索
.search-wrapper {
  padding: 12rpx 26rpx;
  margin: 40rpx auto;
  width: 690rpx;
  height: 58rpx;
  box-sizing: border-box;
  background: #F2F2F2;
  border-radius: 20rpx;
  display: flex;
  align-items: center;

  .ico-search {
    width: 36rpx;
    height: 35rpx;
    display: block;
    margin-right: 10rpx;

    .ico-search-img {
      width: 36rpx;
      height: 35rpx;
    }
  }

  .input-wrapper {
    width: 100%;

    .input {
      width: 100%;
      font-size: 24rpx;
      color: var(--text-color);
      font-weight: 400;
    }
  }
}

// list
.list-wrapper {
  width: 100%;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;

  .list {}

  .list-item {
    margin: 0 auto;
    width: 690rpx;
    min-height: 86rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: var(--text-color);
    display: flex;
    align-items: center;
    box-sizing: border-box;

    &.active {
      color: var(--primary-color);
    }
  }

  .no-data {
    margin: 0 auto;
    width: 690rpx;
    height: 100%;
    font-size: 28rpx;
    font-weight: 400;
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
  }

}

.divider {
  width: 100%;
  height: 20rpx;
  background: var(--page-bgColor);
}

.btn-cancel {
  width: 750rpx;
  height: 110rpx;
  font-size: 32rpx;
  font-weight: 400;
  color: var(--text-color);
  background: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>